<template>
	<view class="container">
		<view class="detail-top">
			<view class="back">
				<uv-icon name="arrow-left" size="28" color="#333" @click="back"></uv-icon>
			</view>
			<image class="top-image" :src="info.image">
			</image>
			<view class="details">
				<view class="detail-info">
					<button class="shop-btn" @click.stop="toPhone(info.phone)">
						拨打电话
					</button>
					<view class="shop-title">
						{{info.title}}
					</view>
					<view class="shop-sub" style="margin-top: 32rpx;">
						<uv-icon name="phone" size="16"></uv-icon>
						<view class="shop-sub-title">
							{{info.phone }}
						</view>
					</view>
					<view class="shop-sub">
						<uv-icon name="map" size="16"></uv-icon>
						<view class="shop-sub-title1">
							{{info.floor }}
						</view>
					</view>
					<view class="shop-adress">
						{{info.address }}
					</view>
				</view>
				<view class="detail-intro">
					<view class="intro-title">
						详细介绍
					</view>
					<view class="intro-content" v-html="content">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ShopDetail
	} from '../../api/list.js'
	export default {
		data() {
			return {
				id: "",
				info: {},
				content: ""
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail(this.id)
		},
		methods: {
			async getDetail(id) {
				const data = await ShopDetail({
					id: id
				})
				this.info = data.data
				// this.content = data.data.content.replace(/<img(.*?)>/g, (match, imgTag) => {
				// 	const modifiedImgTag = imgTag.replace(/(width|height)=("|')[^"']*?("|')/g, '');
				// 	return `<img${modifiedImgTag} width="100%" height="auto">`;
				// });
				this.content = this.formatRichHtml(data.data.content)
			},
			back() {
				uni.switchTab({
					url: '/pages/index/index?activeTab=4',
					animationType: 'pop',
					animationDuration: 500
				})
			},
			toPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			formatRichHtml(html) {
				if (!html) {
					return html;
				}
				//控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					// console.log(match.search(/style=/gi));
					if (match.search(/style=/gi) === -1) {
						match = match.replace(/\<img/gi, '<img style=""');
					}
					return match;
				});
				newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; ');
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/background-color[\s:]+[^;]*;/gi, '');
				return newContent;
			},
		}
	}
</script>

<style scoped lang="scss">
	@font-face {
		font-family: 'PingFang SC';
		src: url('../../static/font/PingFang Regular.ttf');
	}

	.container {
		position: relative;
		width: 750rpx;
		height: 100%;
		background: #F7F7F7;

		.detail-top {
			height: 828rpx;
			width: 750rpx;
			// background-color: red;
			position: relative;

			.back {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				left: 32rpx;
				top: 116rpx;
				z-index: 2;
			}

			.top-image {
				height: 550rpx;
				width: 750rpx;
				// position: absolute;
			}

			.details {
				width: 750rpx;
				// height: 1086rpx;
				background: #F7F7F7;
				box-shadow: 0rpx 4rpx 30rpx 12rpx rgba(241, 241, 241, 0.5);
				border-radius: 12rpx;
				position: absolute;
				top: 538rpx;

				.detail-info {
					height: 290rpx;
					width: 750rpx;
					background-color: #fff;
					box-sizing: border-box;
					padding: 28rpx 28rpx 42rpx 28rpx;
					position: relative;

					.shop-btn {
						// width: 136rpx;
						height: 60rpx;
						background: #04B364;
						border-radius: 12rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 34rpx;
						top: 96rpx;
					}

					.shop-title {
						height: 42rpx;
						font-size: 34rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #333333;
						// margin-top: 16rpx;
					}

					.shop-sub {
						margin-top: 26rpx;
						display: flex;

						.shop-sub-title {
							margin-left: 8rpx;
							font-size: 30rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #666666;
						}

						.shop-sub-title1 {
							margin-left: 8rpx;
							font-size: 30rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}

					.shop-adress {
						margin-left: 36rpx;
						height: 34rpx;
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-top: 10rpx;

					}

				}

				.detail-intro {
					padding-top: 42rpx;
					padding-left: 28rpx;
					margin-top: 16rpx;
					background-color: #fff;
					padding-bottom: 88rpx;
					padding-right: 28rpx;

					.intro-title {
						font-size: 36rpx;
						font-family: 'PingFang SC';
						font-weight: 500;
						color: #333333;
					}

					.intro-content {
						margin-top: 16rpx;
					}
				}

			}
		}
	}
</style>